<template>
    <div class="graph-card-wrapper">
        <Card :bordered="false">

            <!-- 元件图象 -->
            <div slot="title" class="main pointer" @click="graphClick">
                <img :src="graph.graphUrl" class="image">
            </div>

            <!-- 元件附属信息 -->
            <div class="more-content pointer" >

                <p class="more-content-label" v-if="graph.graphName != ''"><span class="more-content-name">{{graph.graphName}}</span></p>
                <p class="more-content-label" v-else><span class="more-content-name">暂无标签</span></p>
                <!-- 暂时注释 -->
                <!-- <P class="more-content-label"><span>指标目录：</span> <span></span></P> -->
                <P class="more-content-label"><span>创建人：</span> <span>{{graph.createName}}</span></P>

                <p>
                    <!-- 暂时注释 -->
                    <!-- <span class="more-content-user"><span>计算频率：</span></span> -->
                    <!-- 预留位置 -->
                    <span class="more-content-date f-r"></span>
                </p>
            </div>

            <!-- 功能操作区 -->
            <div slot="extra" class="operation" v-if="!batchFlag">
                <Poptip trigger="hover" placement="bottom" ref="graphPoptip">
                    <a style=""><i class="zlstbd-icon-more" style="padding: 7px 4px 0px;"/></a>
                    <div slot="content" class="poptip-content">
                        <ul>
                            <li @click="edit(graph)">
                                <p>基本信息编辑</p>
                            </li>
                            <li @click="editGraph(graph)">
                                <p>属性编辑</p>
                            </li>
                            <li @click="exportPic(graph)">
                                <p>导出</p>
                            </li>
                            <!-- <li @click="viewDatasource">
                                <p>查看业务指标</p>
                            </li> -->
                            <li @click="del(graph)">
                                <p>删除</p>
                            </li>
                        </ul>
                    </div>
                </Poptip>
            </div>
        </Card>

        <fullModal v-model="modal.picGraph">
            <div class="title">
                <div class="f-l">{{graph.graphName}}</div>
                <div class="f-r">{{graph.createTime |time}}</div>
            </div>
            <div class="graph-details">
                <graph-detail :args="graph"></graph-detail>
            </div>
        </fullModal>
        <fullModal v-model="modal.datasource">
            <graph-datasource ref="graphDatasource" :graph="graph"></graph-datasource>
        </fullModal>

        <graph-edit ref="graphEdit"  @refreshGraphList="refreshGraphList"></graph-edit>
    </div>
</template>
<script>
import util            from 'util'
import getData         from 'getData'
import fullModal       from '@/components/common/fullmodal.vue'
import graphDetail     from './graph-detail'
import graphDatasource from './graph-datasource'
import graphEdit       from './graph-edit';

export default {
    components:{fullModal,graphDetail,graphDatasource,graphEdit},
    props: {
        graph: {
            type: Object,
        },
        batchFlag:{
            type: Boolean
        },
        checklist:{
            type:Array,
            default:()=>{
                return  [];
            }
        },
        catalogTypeSelect: {
          type: Object
        }
    },
    // watch:{
    //     cardAllSelected(val){
    //        if(val){
    //            this.checkedBatch(true)
    //        }else{
    //            this.checkedBatch(false)
    //        }
    //     }
    // },
    data () {
        return {
            modal:{
                datasource:false,
                picGraph:false
            },
            batchIconIsChecked:false
        }
    },
    computed:{
        hasCheck(){
            for(var i=0;i<this.checklist.length;i++){
                if(this.checklist[i].graphId===this.graph.graphId){
                    return true;
                }
            }
            return  false;
        },

        graphName(){
            let value = "";
            if(this.graph.graphName.length > 11){
                value = this.graph.graphName.substring(0,11) + "...";
            }else{
                value = this.graph.graphName;
            }
            return value;
        }
    },
    filters: {
        formatDateNew(time) {
            var date = new Date(time);
            return util.util.formatDate(date);
        }
    },
    methods:{
        checkedBatch(){
            this.$emit("getBatchGraphId",!this.hasCheck,this.graph)
        },
        //导出图片
        exportPic(graph) {//下载图片地址和图片名
            let image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute("crossOrigin", "anonymous");
            image.onload = function() {
                let canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                let context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, image.width, image.height);
                let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
                let a = document.createElement("a"); // 生成一个a元素
                let event = new MouseEvent("click"); // 创建一个单击事件
                a.download = graph.graphName; // 设置图片名称
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = graph.graphUrl;
        },
        refreshGraphList(projectId)  {
            this.$emit('queryListByProId', projectId);
        },
        //基本信息编辑
        edit(graph) {
            this.$refs.graphPoptip.cancel();
            this.$refs.graphEdit.show(graph);
        },
        //点击删除图表按钮，显示弹窗
        del: function(params) {
            var that = this
            that.$refs.graphPoptip.cancel();
            that.$Modal.confirm({
            content: "是否删除该元件?",
            onOk: function() {
                that.deleteGraph(params);
            },
            okText:"是",
            cancelText:"否"
            });
        },
        deleteGraph(params){
             getData.get('deleteGraph',{}, params.graphId).then(res => {
                if (res.status == 200 && res.data.code == '000') {
                    this.$Message.success('删除成功！');
                    this.refreshGraphList(params.classficationId);
                } else if (res.status == 200) {
                    this.$Message.warning('删除失败: ' + res.data.errorMsg);
                }
             });
        },
        //属性编辑
        editGraph(){
          let query = Object.assign({id:this.graph.graphId}, this.catalogTypeSelect)
            this.$router.push({
                path:'/graph/add',
                query
            });
        },
        //点击卡片
        graphClick(){
            this.modal.picGraph = true;
        },
        //查看数据源
        viewDatasource(){
            this.$refs.graphPoptip.cancel();
            this.modal.datasource = true;
        },
    }
}
</script>
<style lang="less">
.graph-card-wrapper:hover {
    .ivu-card {
        background: #f7f7f7;
    }
    .operation {
        display: inline;
    }
}

.graph-card-wrapper{
    float: left;
    text-align: left;
    margin:0 0 10px 0;
    padding: 0 6px;
    width: 25%;
    //padding: 10px 5px;
    .ivu-card-head {
        padding: 8px;
    }

   .operation{
        display: none;
        background: #ffffff;
        width: 28px;
        height: 28px;
        padding: 3px;
        border-radius:100%;
        .ivu-poptip-body {
            padding: 8px 0;
        }
    }

    .main {
      position: relative;
      padding-top: 54%;
      height: 0;
        .image {
          margin: auto;
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          width: 100%;
          height: 100%;
        }
        .title {
            cursor: pointer;
            //font-size: @font-size-large;
            margin: 15px 0;
        }
        .title-disabled {
            opacity:0.5;
            color:#212121;
        }
        .extra-title {
            padding: 10px 0 24px;
            //border-bottom: 1px solid @border-color-split;
            color: #777777;
        }
    }
     .more-content {
        padding: 0px;
        position:relative;
        .more-content-name {
            font-size:16px;
            font-weight:bold;
            color:#212121;
            letter-spacing:0;
            text-align:left;
            margin-bottom: 5px
        }
        .more-content-label {
            font-size:14px;
            color:#777777;
            text-align:left;
            margin-bottom: 5px
        }
        .more-content-user {
            position:absolute;
            font-size:12px;
            color:#777777;
            text-align:left;
        }
        .more-content-date {
            position:absolute;
            font-size:12px;
            color:#777777;
            text-align:left;
            right: 10px;
        }
    }
    .batchOperation{
        position: absolute;
        top: 0px;
        right: 0px;
        // transform:rotate(90deg);//旋转
        // -ms-transform:rotate(180deg); /* Internet Explorer */
        // -moz-transform:rotate(180deg); /* Firefox */
        // -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
        // -o-transform:rotate(180deg); /* Opera */
        .zlstbd-icon-operation-label{
            font-size: 30px;
            color: #000;
        }
        .zlstbd-icon-batch-check{
             font-size: 20px;
        }
    }
}
</style>

